<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/edit.css" />
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap/js/bootstrap-treeview.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap/js/bootstrap.addtabs.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap/js/bootstrap-table.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap/js/bootstrap-table-zh-CN.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap/js/bootbox.js"></script>
    <script type="text/javascript" src="../js/bootstrap/js/fileinput.js"></script>
    <script type="text/javascript" src="../js/bootstrap/js/zh.js"></script>
    <link rel="stylesheet" href="../js/bootstrap/css/fileinput.css" />
    <link rel="stylesheet" href="../js/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="../js/bootstrap/css/bootstrap-treeview.min.css" />
    <link rel="stylesheet" href="../js/bootstrap/css/bootstrap.addtabs.css" />
    <link rel="stylesheet" href="../js/bootstrap/css/bootstrap-table.min.css" />

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }
        a  {
            text-decoration: none;

        }
        .header ul{
            width: 160px;
            height: 50px;
            /* background-color: black; */
            /**设置成为弹性容器**/
            display: flex;
            margin-top: 20px;
            margin-left: 30px;
        }
        .header ul p{
            font-size: 22px;
        }
        .font-color{
            background-color: rgb(242,247,251);
        }
        .head-font{
            background-color: #0066ff;
            width: 7px;
            height: 25px;
            border-radius: 10px;
            margin-top: 5px;
        }
        /*********第一个表格*****/
        .look-one-tb{
            width: 98%;
            height: 350px;
            margin: 0 auto;
            /* background-color: #0066ff; */
            border-top: 1px solid silver;

        }
        /*********第二个表格*****/
        .look-two-tb{
            width: 100%;
            height: 380px;
            margin: 100px auto;
            /* background-color: #0066ff; */
            border-top: 1px solid silver;
            border-bottom: 1px solid silver;
        }
    </style>
</head>
<body>
    <!--头部标签-->
    <div class="header">
        <ul>
          <li><div class="head-font"></div></li>
          <li><p>&nbsp; &nbsp;签约详情</p></li>
        </ul>    
    </div>
    <!--第一个表格-->
    <div class="look-one-tb">
        <br>
        <h4>居民信息</h4>
        <!-- 条查 -->
        <div class="form-inline">
          <div class="form-group" style="margin-right: 50px;">
              <font  style="color: silver;">签约状态 &nbsp; &nbsp;&nbsp;</font>
              <input type="text" style="width:200px" class="form-control" disabled="disabled" placeholder="李小明">
          </div>
          <div class="form-group"  style="margin-right: 50px;">
            <font  style="color: silver;">身份证号码 &nbsp; &nbsp;&nbsp;</font>
            <input type="text" style="width:200px" class="form-control"  placeholder="371425199809080423">
        </div>
          <div class="form-group">
           <font  style="color: silver;">性别 &nbsp; &nbsp;&nbsp;</font>

            <select  name="xueli" class="form-control" data-live-search="true" style="width:200px">
                <option value="-1">请选择</option>
                <option value="高中">高中</option>
                <option value="大专">大专</option>
                <option value="本科">本科</option>
                <option value="研究生">研究生</option>
              </select>
             
        </div>
        <br>
        <br>
          <!-- 2条查 -->
          <div class="form-inline">
            <div class="form-group"  style="margin-right: 50px;">
                <font  style="color: silver;">出生年月 &nbsp; &nbsp;&nbsp;</font>
                <input type="date" style="width:200px" class="form-control">
            </div>
            <div class="form-group"  style="margin-right: 50px;">
            <font  style="color: silver;">联系电话 &nbsp; &nbsp; &nbsp; &nbsp; </font>
              <input type="text" style="width:200px" class="form-control"  placeholder="12511556">
          </div>
            <div class="form-group">
              <font  style="color: silver;">现居地 &nbsp; &nbsp;&nbsp;</font>
  
              <input type="text" style="width:250px" class="form-control"  placeholder="上海杨浦区延安西路">
               
          </div>
          <br>
        <br>
           <!-- 3条查 -->
           <div class="form-inline">
            <div class="form-group" >
               <font  style="color: silver;">居民标签 &nbsp; &nbsp;&nbsp;</font>
                <select  name="xueli" class="form-control" data-live-search="true" style="width:200px">
                    <option value="-1">请选择</option>
                    <option value="高中">高中</option>
                    <option value="大专">大专</option>
                    <option value="本科">本科</option>
                    <option value="研究生">研究生</option>
                  </select>
            </div>
            <br>
            <br>
            <div>
                <div style="float: left;"><font  style="color: silver;">家庭成员 &nbsp; &nbsp;&nbsp; </font></div>
              
               <div style="width: 202px;height:87px;float: left;border-radius: 5px;background-color: white;margin-right: 20px;border: 1px solid silver;">
                <img src="../img3/屏幕截图 2022-09-21 115313.png" style="width: 200px;">
            </div> 
            <div style="width: 205px;height:87px;float: left;border-radius: 5px;background-color: white;border: 1px solid silver;">
                <img src="../img3/屏幕截图 2022-09-21 115342.png" style="width: 200px;">
            </div>
            <div style="float: left;margin: 30px auto;"><font  style="color: #0066ff;">&nbsp; &nbsp; +关联家庭成员</font></div>
            </div>
        </div>
        </div>
        <br>
    <!--第一个表格-->
    <div class="look-two-tb">
        <br>
        <h4>居民信息</h4>
        <!-- 条查 -->
        <div class="form-inline">
          <div class="form-group"  style="margin-right: 160px;">
              <font  style="color: silver;">签约编号 &nbsp; &nbsp;&nbsp;</font>
              <font style="width: 200px;"> 20190009091</font>
          </div>
          <div class="form-group"  style="margin-right: 205px;">
            <font  style="color: silver;">签约状态 &nbsp; &nbsp;&nbsp;</font>
            <font  style="color: #28d094;">待审核</font>
        </div>
          <div class="form-group">
           <font  style="color: silver;">签约结构 &nbsp; &nbsp;&nbsp;</font>

            <select  name="xueli" class="form-control" data-live-search="true" style="width:200px">
                <option value="-1">请选择</option>
                <option value="高中">高中</option>
                <option value="大专">大专</option>
                <option value="本科">本科</option>
                <option value="研究生">研究生</option>
              </select>
             
    </div>
        <br>
        <br>
          <!-- 2条查 -->
          <div class="form-inline">
            <div class="form-group" style="margin-right: 45px;">
                <font  style="color: silver;">签约结构 &nbsp; &nbsp;&nbsp;</font>
     
                 <select  name="xueli" class="form-control" data-live-search="true" style="width:200px">
                     <option value="-1">请选择</option>
                     <option value="高中">高中</option>
                     <option value="大专">大专</option>
                     <option value="本科">本科</option>
                     <option value="研究生">研究生</option>
                   </select>
                  
             </div>
             <div class="form-group" style="margin-right: 45px;">
                <font  style="color: silver;">签约结构 &nbsp; &nbsp;&nbsp;</font>
     
                 <select  name="xueli" class="form-control" data-live-search="true" style="width:200px">
                     <option value="-1">请选择</option>
                     <option value="高中">高中</option>
                     <option value="大专">大专</option>
                     <option value="本科">本科</option>
                     <option value="研究生">研究生</option>
                   </select>
                  
             </div>
             <div class="form-group" style="margin-right: 45px;">
                <font  style="color: silver;">签约结构 &nbsp; &nbsp;&nbsp;</font>
     
                 <select  name="xueli" class="form-control" data-live-search="true" style="width:200px">
                     <option value="-1">请选择</option>
                     <option value="高中">高中</option>
                     <option value="大专">大专</option>
                     <option value="本科">本科</option>
                     <option value="研究生">研究生</option>
                   </select>
                  
             </div>
          <br>
        <br>
           <!-- 4条查 -->
           <div class="form-inline">
            <div class="form-group"  style="margin-right: 160px;">
                <font  style="color: silver;">签约编号 &nbsp; &nbsp;&nbsp;</font>
                <font style="width: 200px;"> 20190009091</font>
            </div>
            <div class="form-group"  style="margin-right: 230px;">
              <font  style="color: silver;">签约状态 &nbsp; &nbsp;&nbsp;</font>
              <font>1年</font>
          </div>
            <div class="form-group">
             <font  style="color: silver;">&nbsp; 费用 &nbsp; &nbsp; &nbsp; </font>
             <font>￥20</font>  
          </div>
            <br>
            <br>
            <div class="form-inline">
                <div class="form-group"  style="margin-right: 160px;">
                    <font  style="color: silver;">签约编号 &nbsp; &nbsp;&nbsp;</font>
                    <font style="width: 200px;"> 20190009091</font>
                </div>
                <div class="form-group">
                 <font  style="color: silver;">签约结构 &nbsp; &nbsp;&nbsp;</font>
      
                 <input type="date" style="width:200px" class="form-control"  placeholder="上海杨浦区延安西路">
                   
              </div>

            <div>

            <br>
                <div style="float: left;"><font  style="color: silver;">家庭成员 &nbsp; &nbsp;&nbsp; </font></div>
              
               <div style="width: 530px;height:87px;float: left;border-radius: 5px;background-color: white;margin-right: 20px;border: 1px solid silver;">
                <br>
                <font  style="color: silver;">&nbsp; &nbsp;&nbsp; 请输入签约备注 &nbsp; &nbsp;&nbsp; </font>
            </div> 

            </div>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <button type="button" class="btn btn-primary" onclick="add()" style="float: left;margin-right: 20px;">确定</button>
        <button type="button" class="btn btn-default" data-dismiss="modal" style="float: left;margin-right: 10px;">关闭</button><!--弹窗的尾部-->
  
</body>

</html>